@import "base/environment";

.ui-widget.ui-tooltip {
  padding:5px;
  position:absolute;
  z-index:$zindexTooltip;
  display: block;
  @include fontSize(11px);
  max-width: 200px;
  padding: 3px 8px;
  color: $fcTooltip;
  text-align: center;
  text-decoration: none;
  background-color: $bgColorTooltip;
  opacity: 0.8;
  border: none;
}

.ui-tooltip {
  &:before {
    border-color: transparent transparent $bgColorTooltip transparent;
    position: absolute;
    border-style:solid;
    border-width: $tooltipCaretSize;
    width:0;
    height:0;
    content: "";
    top: -$tooltipCaretSize * 2;
    left: 5px;
  }
  &.right:before {
    left: auto;
    right: 5px;
  }
  &.bottom:before {
    border-color: $bgColorTooltip transparent transparent transparent;
    top: auto;
    bottom: -$tooltipCaretSize * 2;
  }
  &.center:before {
    left: 50%;
    margin-left: -$tooltipCaretSize;
    right: auto;
  }
  &.middle:before {
    top: 50%;
    margin-top: -$tooltipCaretSize;
    bottom: auto;
  }
  &.horizontal:before {
    top: 50%;
    margin-top: -$tooltipCaretSize;
    bottom: auto;
    left: -$tooltipCaretSize * 2;
    right: auto;
    border-color: transparent $bgColorTooltip transparent transparent;
  }
  &.right.horizontal:before {
    left: auto;
    right: -$tooltipCaretSize * 2;
    border-color: transparent transparent transparent $bgColorTooltip;
  }
  &.bottom.horizontal:before {
    top: auto;
    bottom: 5px;
  }
  &.top.horizontal:before {
    top: 5px;
  }
}
